<template>
  <div id="module_list">
    <el-row :gutter="20">
      <el-col class="left-col" :span="8" style>
        <div class="grid-content">
          <div class="treeOptions">
            <el-checkbox-group v-model="checkList" @change="changeTreeOptions">
              <el-checkbox label="隐藏删除" class="deleteOption"></el-checkbox>
              <el-checkbox label="隐藏禁用" class="deleteOption"></el-checkbox>
            </el-checkbox-group>
          </div>
          <el-tree
            :data="data"
            :indent="32"
            highlight-current
            node-key="permissionId"
            default-expand-all
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
            ref="vuetree"
            :filter-node-method="filterTreeNode"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span :class="data.isLocked ? 'islocked' : ''">
                <i v-if="data.isLocked" class="el-icon-turn-off-microphone"></i>
                <span :class="data.isDelete === 1 ? 'isdelete' : ''">{{ data.title }}</span>
              </span>
            </span>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="16" class="right-col">
        <div class="grid-content" style="height:100%">
          <el-card class="scroll-card" shadow="never" style="height: 100%;">
            <div slot="header" class="clearfix" v-if="currentTreeItem">
              <span>{{currentTreeItem.moduleName}}</span>
              <span
                class="moduleStatus"
                v-if="currentTreeItem.isDelete == 1 || currentTreeItem.isLocked == 1"
              >
                <span style="color:#ff7068">{{currentTreeItem.isDelete == 1?'已删除':''}}</span>
                <span style="color:#dda350">{{currentTreeItem.isLocked == 1?'已禁用':''}}</span>
              </span>
              <el-dropdown
                style="float: right; padding: 3px 0"
                trigger="click"
                @command="handleCommand"
              >
                <span class="el-dropdown-link" style="color:#549ff8">
                  基本操作
                  <i class="el-icon-caret-bottom el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item class="clearfix" icon="el-icon-circle-plus" command="add">添加模块</el-dropdown-item>
                  <el-dropdown-item class="clearfix" icon="el-icon-edit" command="edit">编辑模块</el-dropdown-item>
                  <el-dropdown-item
                    class="clearfix"
                    :icon="currentTreeItem.isDelete == 0 ? 'el-icon-delete':'el-icon-refresh-right'"
                    command="delete"
                  >{{currentTreeItem.isDelete == 0? '删除' :'恢复'}}模块</el-dropdown-item>
                  <el-dropdown-item
                    class="clearfix"
                    :icon="currentTreeItem.isLocked == 0 ? 'el-icon-remove' : 'el-icon-video-play'"
                    command="lock"
                  >{{currentTreeItem.isLocked == 0 ? '禁用' :'启用'}}模块</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="message_box" v-if="currentTreeItem" ref="testTem">
              <moduleForm
                type="1"
                :isOpenEdit="isOpenEdit"
                ref="editFrom"
                :id="currentTreeItem.permissionId"
                @cancleEditFn="cancleEditModule"
                @getModules = "getModules"
              ></moduleForm>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <addModule v-if="addShow" :parentId="parentId" :addShow="addShow" @getModules="getModules"></addModule>
  </div>
</template>
<script>
import Modules from '../../../api/json/modules'
import addModule from './addModule'
import moduleForm from './moduleForm'

  let id = 1000;
  export default {
    components: {
      addModule,
      moduleForm
    },
    data() {
      // const data1= Modules
      return {
        data: null,
        allData:null,//全部数据
        nodeMessage: '',
        nowModlue: null,
        parentId: null,
        addShow: false ,// 展示新增模块弹窗
        isOpenEdit:false,
        currentTreeItem:null,
        checkList:["隐藏删除"],
        hideLockData:null,
      }
    },
    mounted(){
        this.getModules();
    },
    methods: {
      getModules(data){//获取树列表
        if(data){
          this.addShow = data.addShow;
          if(!data.refresh)return;
          if(data.editFinish){//修改完成
          
          }
        }
        let that = this
        this.$server.systemControlApi.getPermissionList().then(res=>{
          that.data = res.data;
          that.allData = res.data;//所有数据
          that.$nextTick(function () {
              let  checkList = that.checkList;
              if(checkList.length > 0)that.$refs.vuetree.filter(checkList) //过滤禁用或者删除项
              if(!that.currentTreeItem){
                that.handleNodeClick(that.data[0]);
                that.$refs.vuetree.setCurrentKey(that.data[0].permissionId)
              }else{
                that.$refs.vuetree.setCurrentKey(that.currentTreeItem.permissionId);//高亮当前编辑选项
              }
          })
        })
      },
      append() {
        this.parentId = this.currentTreeItem.permissionId;
        this.addShow = true;
      },
      edit(){
        //开启编辑
        this.isOpenEdit = true;
      },
      remove() {
        //删除操作
        let that = this,
        isDelete = this.currentTreeItem.isDelete === 0 ? 1 : 0,
        params={
            "isDelete": isDelete,
            "permissionId": this.currentTreeItem.permissionId
        }
        this.$server.systemControlApi.deletePermission(params).then(res=>{
             that.$message(`"${this.currentTreeItem.moduleName}" ${isDelete == 1 ?'删除成功!':'恢复成功!'}`);
             that.getModules();
            Vue.set(that.currentTreeItem,"isDelete", isDelete)
        })
      },
      lock() {
        //禁用操作
        let that = this,
        isLocked = this.currentTreeItem.isLocked === 0 ? 1 : 0,
        params={
            "isLocked": isLocked,
            "permissionId": this.currentTreeItem.permissionId
        }
        this.$server.systemControlApi.lockPermission(params).then(res=>{
            that.$message(`"${this.currentTreeItem.moduleName}" ${isLocked == 1 ?'禁用成功!':'启用成功!'}`);
            that.getModules();
            Vue.set(that.currentTreeItem,"isLocked", isLocked)
        })
      },
      handleNodeClick(val) {
        //tree点击
        this.isOpenEdit = false;//先关闭修改
        var messageArray= []
        this.currentTreeItem= {
          "moduleName": val.title,
          "parentId":val.parentId,
          "permissionId":val.permissionId,
          "isLocked":val.isLocked,
          "isDelete":val.isDelete,
        }
        if(this.$refs.editFrom){
          this.$refs.editFrom.getModuleById(val.permissionId);
        }
      },
      cancleEditModule(){
        this.isOpenEdit = false;
      },
      handleCommand(command) {
        switch(command){
          case 'add':
            this.append();
            break;
          case 'edit':
            this.edit();
            break;
          case 'delete':
            this.remove();
            break;
          case 'lock':
            this.lock();
            break;
        }
      },
      //隐藏删除项，隐藏禁用项
      changeTreeOptions(e){
        let that = this;
        that.$nextTick(function () {
            that.$refs.vuetree.filter(e);
        })
      },
      //过滤删除或者禁用项
      filterTreeNode(value, data) {
        if (!value || value.length == 0) return true;
        if(value.length > 1){
          return data["isLocked"] !== 1 && data["isDelete"] !== 1;
        }else{
          let item = value == "隐藏禁用" ? "isLocked" : "isDelete";
          return data[item] !== 1;
        }
      }
    }
  };
</script>
<style lang="less" scoped>
#module_list {
  .el-row {
    height: 100%;
  }
  .moduleEditRow.el-row {
    height: auto;
  }
  .left-col {
    height: 100%;
    overflow: auto;
  }
  .el-tree {
    padding: 10px 0;
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-right: 8px;
    }
  }
  .right-col {
    height: 100%;
    position: absolute;
    right: 0;
    top: -1px;

    .message_box {
      height: 100%;
      display: flex;
      flex-direction: column;
      font-size: 12px;
      .title-module {
        margin: 10px 0;
        h3 {
          color: #ff7068;
          text-align: center;
        }
      }
      p.formInfo {
        font-size: 14px;
        color: #7c7c7c;
        line-height: 40px;
      }
    }
  }
}
.isdelete {
  text-decoration: line-through;
  color: #ff7068;
}
.islocked {
  color: #dda350;
}
.moduleStatus {
  font-size: 12px;
  position: relative;
  display: inline-block;
  padding: 0 6px;
}
.moduleStatus::before {
  position: absolute;
  content: "[";
  left: 0;
  top: 0;
}
.moduleStatus::after {
  position: absolute;
  content: "]";
  right: 0;
  top: 0;
}

.treeOptions {
  background: #fff;
  padding: 10px 20px 0;
  .el-checkbox-group {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.scroll-card {
  .el-card__header {
    padding: 10px 20px 0 !important;
  }
}
</style>